<nz-modal
  [nzWidth]="570"
  [(nzVisible)]="showModal"
  [nzTitle]="modalTitle"
  (nzOnCancel)="onClose()"
  [nzBodyStyle]="{ maxHeight: '70vh', overflowY: 'auto' }"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
>
  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>{{
          $t('_webLink')
        }}</nz-form-label>
        <nz-form-control [nzSpan]="20" [nzErrorTip]="$t('_requiredLink')">
          <input
            formControlName="url"
            nz-input
            (blur)="onUrlBlur()"
            #inputUrl
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>{{
          $t('_webName')
        }}</nz-form-label>
        <nz-form-control [nzSpan]="20" [nzErrorTip]="$t('_requiredName')">
          <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
            <input
              #inputTitle
              formControlName="title"
              nz-input
              [readonly]="getting || translating"
              [placeholder]="getting ? $t('_pendingGet') : ''"
            />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <ng-template #suffixButton>
        <button
          [disabled]="!title"
          [nzLoading]="translating"
          nz-button
          nzType="primary"
          nzSearch
          (click)="handleTranslate('title')"
        >
          {{ $t('_translate') }}
        </button>
      </ng-template>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_sort') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <input
            formControlName="index"
            nz-input
            type="number"
            [placeholder]="DEFAULT_SORT_INDEX"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_shortcut') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-switch class="mr-4" formControlName="top"></nz-switch>

          <nz-checkbox-group
            *ngIf="isTop"
            [nzOptions]="topOptions"
            formControlName="topTypes"
          ></nz-checkbox-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_onlyOwnVisible') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-switch formControlName="ownVisible"></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_score') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-rate formControlName="rate" nzAllowHalf></nz-rate>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_iconAddr') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-input-group [nzPrefix]="prefixIcon" [nzSuffix]="suffixIconSearch">
            <input
              formControlName="icon"
              nz-input
              [readonly]="getting"
              [placeholder]="getting ? $t('_pendingGet') : ''"
            />
          </nz-input-group>

          <ng-template #prefixIcon>
            <div
              class="cursor-pointer"
              (click)="jumpService.goUrl($event, iconUrl)"
            >
              <app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl" />
            </div>
          </ng-template>
          <ng-template #suffixIconSearch>
            <ng-content *ngIf="isLogin">
              <app-upload-image
                (onChange)="onChangeFile($event, 'icon')"
              ></app-upload-image>
            </ng-content>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_image') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-input-group
            nzSearch
            [nzPrefix]="prefixImgIcon"
            [nzAddOnAfter]="suffixImgButton"
          >
            <input
              formControlName="img"
              nz-input
              [readonly]="submitting"
              [placeholder]="$t('_imgPlaceholder')"
            />
          </nz-input-group>

          <ng-template #prefixImgIcon>
            <div
              class="cursor-pointer"
              (click)="jumpService.goUrl($event, imgUrl)"
            >
              <app-logo [src]="imgUrl" [size]="25" *ngIf="imgUrl" />
            </div>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <ng-template #suffixImgButton>
        <span class="mx-2">
          <app-upload-image
            (onChange)="onChangeFile($event, 'img')"
          ></app-upload-image>
        </span>
        <button
          [nzLoading]="submitting"
          nz-button
          nzType="primary"
          nzSearch
          (click)="getScreenshot()"
        >
          {{ $t('_screenshot') }}
        </button>
      </ng-template>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_webDesc') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <textarea
            #inputDesc
            formControlName="desc"
            nz-input
            [nzAutosize]="{ minRows: 3, maxRows: 5 }"
            [readonly]="getting || translating"
            [placeholder]="getting ? $t('_pendingGet') : ''"
          >
          </textarea>
        </nz-form-control>
      </nz-form-item>

      <!-- more url -->
      <div formArrayName="urlArr">
        <nz-form-item
          *ngFor="let n of urlArray.controls; let idx = index"
          [formGroupName]="idx"
        >
          <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
          <nz-form-control [nzSpan]="20">
            <nz-input-group
              [nzAddOnBefore]="addOnBeforeTemplate"
              [nzAddOnAfter]="addOnAfterTemplate"
            >
              <input
                #inputs
                formControlName="url"
                type="text"
                nz-input
                [placeholder]="$t('_tagPlaceholder')"
              />
            </nz-input-group>
            <ng-template #addOnBeforeTemplate>
              <nz-select
                style="width: 100px"
                formControlName="id"
                (ngModelChange)="onSelectChange(idx)"
              >
                <nz-option
                  *ngFor="let tag of tagList()"
                  [nzLabel]="tag.name"
                  [nzValue]="tag.id"
                >
                </nz-option>
              </nz-select>
            </ng-template>
            <ng-template #addOnAfterTemplate>
              <i
                class="cursor-pointer"
                nz-icon
                nzType="minus"
                nzTheme="outline"
                (click)="lessMoreUrl(idx)"
              >
              </i>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <nz-form-item *ngIf="tagList().length > 0">
        <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
        <nz-form-control [nzSpan]="20">
          <button nz-button nzType="default" nzBlock (click)="addMoreUrl()">
            <i nz-icon nzType="plus"></i>{{ $t('_continueAdd') }}
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="onClose()">
      {{ $t('_cancel') }}
    </button>
    <button
      [disabled]="!desc"
      nz-button
      nzType="primary"
      (click)="handleTranslate()"
      [nzLoading]="translating"
    >
      {{ $t('_translate') }}
    </button>
    <button
      nz-button
      nzType="primary"
      (click)="checkRepeat()"
      [disabled]="!url"
    >
      <nz-icon nzType="search" />
      {{ $t('_checkRepeat') }}
    </button>
    <button
      nz-button
      nzType="primary"
      (click)="handleOk()"
      [nzLoading]="submitting || getting || translating"
    >
      {{ $t('_submit') }}
    </button>
  </ng-template>
</nz-modal>
